<!--
 * @Author: hucc
 * @Date: 2021-10-14 16:18:24
 * @LastEditors: hucc
 * @LastEditTime: 2021-10-14 16:40:10
 * @Description: 
-->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/vue.js"></script>
    <script src="../js/vuex.js"></script>
</head>

<body>
    <div id="app">
        <div>moduleA:state--{{msg1}} getters--{{upperMsg1}}</div>
        <button @click='SET_MSG1("你好，模块化A")'>修改A数据</button>
        <div>moduleB:state--{{msg2}} getters--{{upperMsg2}}</div>
        <button @click='SET_MSG2("你好，模块化B")'>修改B数据</button>
    </div>
    <script>
        //1.定义状态机子模块 
        let moduleA = {
            //打开命名空间
            namespaced: true,
            state() {
                return {
                    msg1: 'this is moduleA data'
                }
            },
            getters: {
                upperMsg1(state) {
                    return state.msg1.toUpperCase()
                }
            },
            mutations: {
                SET_MSG1(state, payload) {
                    state.msg1 = payload
                }
            },
            actions: {}
        }
        let moduleB = {
                //打开命名空间
                namespaced: true,
                state() {
                    return {
                        msg2: 'this is moduleB data'
                    }
                },
                getters: {
                    upperMsg2(state) {
                        return state.msg2.toUpperCase()
                    }
                },
                mutations: {
                    SET_MSG2(state, payload) {
                        state.msg2 = payload
                    }
                },
                actions: {}
            }
            //中央仓库
        let store = new Vuex.Store({
            modules: {
                a: moduleA,
                b: moduleB
            }
        })
        let {
            mapState,
            mapGetters,
            mapActions,
            mapMutations
        } = Vuex
        new Vue({
            el: '#app',
            data: {},
            computed: {
                //在vue实例计算属性中 通过辅助函数映射vuex中的state和getters
                ...mapState('a', ['msg1']),
                ...mapState('b', ['msg2']),
                ...mapGetters('a', ['upperMsg1']),
                ...mapGetters('b', ['upperMsg2'])
            },
            methods: {
                //在实例的methods中通过辅助函数映射突变mutations
                ...mapMutations('a', ['SET_MSG1']),
                ...mapMutations('b', ['SET_MSG2'])
            },
            created() {

            },
            store: store
        })
    </script>
</body>

</html>